// components/Calendar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    checkDays:{
      type:Array,
      value:[]
    },    
    notDays:{
      type:Array,
      value:[]
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    curYear:0,
    curMonth:0,
    week:["日","一","二","三","四","五","六"],
    /*
    day:{
      date:
      state: }
    state含义：-2表示空，-1表示普通日期，-3表示今天
              未打卡：1  已打卡：4
    */
    days:[],
    curDay:null,
    rowNum:0,
  },
  //因为页面中取数据需要时间，在组件的attached生命周期中传入的props还不是网络请求的结果，
  //因此需要监听传入的属性，改变时重新计算days
  observers: {
    'checkDays': function(checkDays) {
      // console.log('@',this.data.days)
      // console.log('@',this.data.checkDays)
      this.calculateEmptyGrids(this.data.curYear,this.data.curMonth)
      this.calculateDays(this.data.curYear, this.data.curMonth);
    }
  },
    // 组件声明周期
    lifetimes: {
      attached: function() {
    // 在组件实例进入页面节点树时执行
        //获取当前年月  
        const date = new Date();
        //当前日历的年月日
        const curYear = date.getFullYear();
        const curMonth = date.getMonth() + 1;
        const curDay = date.getDate();
        this.calculateEmptyGrids(curYear,curMonth)
        this.calculateDays(curYear,curMonth)
        // console.log(this.data.days)
        let rowNum = parseInt(this.data.days.length/7)
        this.data.days.length%7!=0? rowNum++:rowNum
        this.setData({
          curYear,
          curMonth,
          rowNum,
          curDay,
          })
          // console.log(this.data.curDay)
          // console.log(this.data.checkDays)
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      },
    },

  /**
   * 组件的方法列表
   */
  methods: {
    //切换月份
    handleMonthChange(e)
    {
      const action = e.currentTarget.dataset.action;
      const curYear = this.data.curYear;
      const curMonth = this.data.curMonth;
      if(action=='prev')
      {
        //上一个月
        let newMonth = curMonth - 1;
        let newYear = curYear;
        if (newMonth < 1) {
          newYear = curYear - 1;
          newMonth = 12;
        }
        this.calculateEmptyGrids(newYear, newMonth);
        this.calculateDays(newYear, newMonth);
        this.setData({
          curYear: newYear,
          curMonth: newMonth
        })
      }else{
        //下一个月
        let newMonth = curMonth + 1;
        let newYear = curYear;
        if (newMonth > 12) {
          newYear = curYear + 1;
          newMonth = 1;
        }
        this.calculateEmptyGrids(newYear, newMonth);
        this.calculateDays(newYear, newMonth);
        this.setData({
          curYear: newYear,
          curMonth: newMonth
        })
      }
    },
    //获取当月供多少天
    getThisMonthDays:function(year, month){
      return new Date(year, month, 0).getDate()
  },
    // 获取当月第一天星期几
    getFirstDayOfWeek:function(year, month) {
      return new Date(Date.UTC(year, month - 1, 1)).getDay();
    },
    // 计算当月1号前空了几个格子，把它填充在days数组的前面
    calculateEmptyGrids:function(year, month) {
      var that = this;
      //计算每个月时要清零
      that.setData({days:[]});
      const firstDayOfWeek = this.getFirstDayOfWeek(year, month);    
      if (firstDayOfWeek > 0) {
        for (let i = 0; i < firstDayOfWeek; i++) {
          var obj  = {
            date:null,
            state:-2,
          }
          that.data.days.push(obj);
        }
        //不setData，前端显示不出来
        this.setData({
          days:that.data.days
        });
      }
    },
    /**
     * 普通日期state:-1 空:-2 今天:-3
     */
  // 绘制当月天数占的格子，并把它放到days数组中
  /**
   * 
   * @param {*} year 计算哪一年的日历
   * @param {*} month 计算哪个月的日历
   * 这里的年和月指的是日历当前是几几年第几个月
   */
  calculateDays:function(year, month) {
    var that = this;
    //今天是几年几月几日
    const date = new Date();
    const curDay = date.getDate();
    const curMonth = date.getMonth()+1;
    const curYear = date.getFullYear();
    const thisMonthDays = this.getThisMonthDays(year, month);
    //已打卡列表
    let checkList=[]
    const checkDays =that.data.checkDays
    // console.log('checkDays',checkDays)
    // console.log('data',that.data.curYear,that.data.curMonth)
    checkDays.map((item)=>{
      let timeDetail = item.split('-')
      const checkedyear = Number(timeDetail[0])
      const checkedmonth = Number(timeDetail[1])
      const checkedday = Number(timeDetail[2])
      // console.log('checkeDays',year,month,day)
      if(checkedyear==year&&checkedmonth==month)
      {
        checkList.push(checkedday)
      }
    })
    // console.log('checkList',checkList)
    for (let i = 1; i <= thisMonthDays; i++) {
      if(curYear==year&&curMonth==month&&i==curDay)
      {
        if(checkList.find((item)=>i==item)){
          var obj = {
            date: "今",
            state: 4,
          }
        }
        else {
          var obj = {
            date: "今",
            state: -3,
          }
        }
        that.data.days.push(obj);
      }
      else if(checkList.find((item)=>i==item))
      {
        var obj = {
          date:i,
          state:4
        }
        that.data.days.push(obj);
      }
      else{
      var obj = {
        date: i,
        state: -1,
      }
      that.data.days.push(obj);
    }
    }
    // console.log('that.data.days',that.data.days)
    //不setData前端显示不出来
    this.setData({
      days:that.data.days
    });
  },

  }
})
